<!--
 * @Author: your name
 * @Date: 2021-07-04 21:11:52
 * @LastEditTime: 2021-07-04 21:18:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /park-web3.0/src/views/business/alarmManagement/haveToDealWith/quanxian.html
-->
<!-- 权限验证

该项目中权限的实现方式是：通过获取当前用户的权限去比对路由表，生成当前用户具有的权限可访问的路由表，通过 router.addRoutes 动态挂载到 router 上。

但其实很多公司的业务逻辑可能不是这样的，举一个例子来说，很多公司的需求是每个页面的权限是动态配置的，不像本项目中是写死预设的。但其实原理是相同的。如：你可以在后台通过一个 tree 控件或者其它展现形式给每一个页面动态配置权限，之后将这份路由表存储到后端。当用户登录后得到 roles，前端根据roles 去向后端请求可访问的路由表，从而动态生成可访问页面，之后就是 router.addRoutes 动态挂载到 router 上，你会发现原理是相同的，万变不离其宗。

只是多了一步将后端返回路由表和本地的组件映射到一起。相关issue -->
<script>
  const map={
    login:require('login/index').default, // 同步的方式
    login:()=>import('login/index')      // 异步的方式
  }
  //你存在服务端的map类似于
  const serviceMap=[
    { path: '/login', component: 'login', hidden: true }
  ]
</script>
<!-- 之后遍历这个map，动态生成asyncRoutes
并将 component 替换为 map[component]
Ps:不排除之后本项目会增加权限控制面板支持真正的动态配置权限。

# 逻辑修改
现在路由层面权限的控制代码都在 @/permission.js 中，如果想修改逻辑，直接在适当的判断逻辑中 next() 释放钩子即可。

# 指令权限
封装了一个指令权限，能简单快速的实现按钮级别的权限判断。 v-permission

使用 -->

<template>
  <!-- Admin can see this -->
  <el-tag v-permission="['admin']">admin</el-tag>

  <!-- Editor can see this -->
  <el-tag v-permission="['editor']">editor</el-tag>

  <!-- Editor can see this -->
  <el-tag v-permission="['admin','editor']">Both admin or editor can see this</el-tag>
</template>

<script>
// 当然你也可以为了方便使用，将它注册到全局
import permission from '@/directive/permission/index.js' // 权限判断指令
export default{
  directives: { permission }
}
</script>
<!-- 局限
在某些情况下不适合使用v-permission，例如元素Tab组件，它只能通过手动设置v-if来实现。
可以使用全局权限判断函数，用法和指令 v-permission 类似。 -->

<template>
  <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">Admin can see this</el-tab-pane>
  <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">Editor can see this</el-tab-pane>
  <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane>
</template>

<script>
import checkPermission from '@/utils/permission' // 权限判断函数

export default{
   methods: {
    checkPermission
   }
}
</script>
